<template>
  <main>
    <!-- tab选项卡 -->
    <div class="dg-tab am-margin-bottom">
      <ul class="dg-center">
        <li class="dg-text-gray"  v-for="(Award,index2) in AwardData" :key="index2" @click="winworksCay(Award.awardID,index2)"  >
          <span v-bind:class="{dgactive:index2==isactive}">{{Award.name}}</span>
        </li>
      </ul>
    </div>

    <div class="max-width-1400 am-center">
      <div class="am-g">
        <div class="am-u-sm-12 am-u-md-6 am-margin-bottom"
          v-for="(works, index) in worksData" :key="index">
        
            <!-- 图片 -->
          <div class="dg-work">
            <router-link :to="'/worksDetail/' + works.worksID">
            <!-- <img :src="thumbnail+works.mainPic" class="am-img-responsive" alt=""> -->
            <img v-lazy="static_pic + works.mainPic" class="am-img-responsive" alt="">
            </router-link>
            <!--奖项图标-->
            <div class="dg_award_logo" >
              <img v-lazy="static_pic + works.labelPath" class="am-img-responsive" alt="">
            </div>
          </div>

          <!-- 作品信息 -->
          <div class="dg-info am-padding-sm">
            <p class="am-text-lg">{{works.worksName}}</p>
            <div class="dg-text-gray dg-intr">{{works.introduction}}</div>

            
            <div class="dg-award">
              <span class="triangle-right am-block am-fl"></span>
              <span class="am-fr am-text-l am-padding-vertical-xs am-padding-horizontal">
                <b>{{works.awardName}}</b>-获得{{works.poll}}票
              </span>
            </div>
          </div>

          <!-- 作者信息：头像、姓名 -->
          <div class="dg-work-dsg am-padding-xs am-cf">
            <div class="am-fl">
              <!-- <img src="/static/2.jpg" class="am-circle am-margin-right-xs" alt=""> -->
              <img v-lazy="static_pic + works.HeadImagePath" class="am-circle am-margin-right-xs" alt="">
              {{works.designerName}}
            </div>

            <p class="am-fr dg-text-gray">
              <i class="am-icon-eye">{{works.clicksNum}}</i>
              <!-- <i class="am-icon-commenting-o">200</i> -->
              <i class="am-icon-thumbs-o-up">{{works.poll}}</i>
            </p>
          </div>
        </div>

        <div class="am-u-end"></div>
      </div>
    </div>

    <!--分页组件-->
    <v-pagination :total="total" :current-page='current' @pagechange="pagechange" :display="display"></v-pagination>
  </main>
</template>

<script>
import Vue from 'vue'
import Header from '@/dg_components/DgHeader'
import DgFooter from '@/views2/Footer'// 底部
import pagination from '@/dg_components/pagination'
export default {
  name: '',
  data() {
    return {
      // worksData: [{}, {}, {}, {}, {}, {}, {}],
      isactive:0,
      AwardData: [
          {
            awardID:"0",
            name:"全部",
          }
        ],
      awardID: '',
      worksData: [],
      // page: {
      //   num: 1,
      //   per: 10,
      //   res: {
      //     total: 0,
      //     count: 0
      //   }
      // },
       total:0,     // 记录总条数
       display:8,   // 每页显示条数
       current: 1,   // 当前的页数

    }
  },
   components: {
    CHeader: Header,
    DgFooter,
    'v-pagination': pagination,
  },
   methods: {
    ready() {
      this.loadData();
      this.loadAward();
     // console.log(this.total+"************");
    },
    loadData() {
      this.loadWorks();
     
    },
    pagechange(currentPage){
        this.current = currentPage;
       // console.log(this.total+"************");
        this.loadWorks();
    },
    loadWorks() {
      return new Promise((resolve, reject) => {
        this.dgpost(this.api.GETPRIZEWORKSPAGED, {
          gameID:	+this.$store.getters.gameID,
          awardID:	+this.awardID,
          pageNum:	+this.current,
          numPerPage: +this.display,
        }).then(res => {
          this.worksData = res.data.data.works;
          this.total=res.data.data.page.total;
            if(this.total==0){this.total=1}
          //this.page.res.count=res.data.data.page.count;
        });
      });
    },
    //获取大赛奖项信息
    loadAward(){
      return new Promise((resolve, reject) => {
        this.dgpost(this.api.GETGAMEDETAILBYID, {
           gameID:	+this.$store.getters.gameID,
        })
        .then(res => {  
         // this.AwardData = res.data.data
         // this.AwardData.push(res.data.data);
        this.AwardData= this.AwardData.concat(res.data.data);//合并数组
          resolve();
        }).catch(err => {
          this.$message({
            title: '加载大赛奖项信息发生错误',
            type: 'error',
            message: err.msg,
            closeable: true
          });
          reject();
        });
      });
    },
    winworksCay(CarID,inex2){
      this.isactive=CarID;
      this.awardID = CarID;
      this.loadWorks();
      
    }
  },
  mounted() {
    this.ready();
    
  }
}
</script>

<style lang="less" scoped>
.dg-tab {
  position: relative;
  z-index: 2;
  height: 60px;
  line-height: 60px;
  width: 100%;
  background-color: #FFF;
  box-shadow: 0 1px 5px #F0F0F0;
  ul {
    // width: 418px;
    margin: 0;
    padding: 0;
    list-style: none;
    li {
      float: left;
      padding: 0 15px;
      cursor: pointer;
      span {
        padding-bottom: 3px;
        position: relative;
        bottom: -15px;
      }
    }
  }
}
.dgactive {
  color: #717171;
  border-bottom: 3px solid #717171;
}
.dg-center {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}
.dg-award {
  position: absolute;
  right: 0;
  top: 30%;
  background-color: #FFB901;
  color: #FFFFFF;
}

.triangle-right {  // 三角形
  height: 0;
  width: 0;
  border: 16px solid transparent;
  border-left: 23px solid #FFFFFF;
  border-right: 0;
}

.dg-work {
  img {
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    width: 100%;
    position: relative;
  }
}

.dg-info {
  position: relative;
  background-color: #FFFFFF;
  border-bottom: 1px solid #EBEBEB;
  max-height: 100px;
}

.dg-work-dsg {
  background-color: #FFFFFF;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  img {
    max-width: 50px;
    min-height: 35px;
  }
}
.dg-intr{
   //white-space:normal; 
   width:60%;
   height: 40px;
   white-space: pre-nowrap;
  //white-space:nowrap;
   text-overflow:ellipsis; 
   overflow: hidden; 
}
.dg_award_logo{
 //background-color:gray;
  width:80px;
  height:80px;
 position: absolute;
 left: 88%;
 z-index: 1;
 top: -20px;
}
</style>
